<template>
  <button
    class="v-btn"
    :class="[
      type ? `v-btn--${type}` : '',
      size ? `v-btn--${size}` : '',
      { 'is-disabled': disabled },
      { 'is-loading': loading },
      { 'is-plain': plain }
    ]"
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <span v-if="loading" class="v-btn__loading">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="12" y1="2" x2="12" y2="6"></line>
        <line x1="12" y1="18" x2="12" y2="22"></line>
        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
        <line x1="2" y1="12" x2="6" y2="12"></line>
        <line x1="18" y1="12" x2="22" y2="12"></line>
        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
      </svg>
    </span>
    <span class="v-btn__content">
      <slot></slot>
    </span>
  </button>
</template>

<script setup>

const props = defineProps({
  // 按钮类型
  type: {
    type: String,
    default: 'default',
    validator: (value) => {
      return ['primary', 'success', 'warning', 'danger', 'info', 'default'].includes(value)
    }
  },
  // 按钮尺寸
  size: {
    type: String,
    default: 'medium',
    validator: (value) => {
      return ['large', 'medium', 'small', 'mini'].includes(value)
    }
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 是否朴素按钮
  plain: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="scss" scoped>
@use '@styles/variables' as *;
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  border: 1px solid transparent;
  border-radius: $border-radius;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 0 15px;
  font-size: $font-size-base;
  height: $height-base;

  &:focus {
    outline: none;
  }

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  &__loading {
    margin-right: 8px;
    animation: rotate 1.5s linear infinite;
  }

  &__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  // 尺寸样式
  &--large {
    height: 40px;
    padding: 0 20px;
  }

  &--small {
    height: 28px;
    padding: 0 10px;
  }

  &--mini {
    height: 24px;
    padding: 0 8px;
  }

  // 类型样式
  &--primary {
    color: #fff;
    background-color: $primary-color;
    border-color: $primary-color;

    &:hover:not(.is-disabled) {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }

  &--success {
    color: #fff;
    background-color: $success-color;
    border-color: $success-color;

    &:hover:not(.is-disabled) {
      background-color: #85ce61;
      border-color: #85ce61;
    }
  }

   &--warning {
    color: #fff;
    background-color: $warning-color;
    border-color: $warning-color;

    &:hover:not(.is-disabled) {
      background-color: #ebb563;
      border-color: #ebb563;
    }
  }

  &--danger {
    color: #fff;
    background-color: $danger-color;
    border-color: $danger-color;

    &:hover:not(.is-disabled) {
      background-color: #f78989;
      border-color: #f78989;
    }
  }

  &--info {
    color: #fff;
    background-color: $info-color;
    border-color: $info-color;

    &:hover:not(.is-disabled) {
      background-color: #a6a9ad;
      border-color: #a6a9ad;
    }
  }

  // 其他类型样式省略，实际项目中需要补全
  &--default {
    color: $text-color;
    background-color: #fff;
    border-color: $border-color;

    &:hover:not(.is-disabled) {
      border-color: $primary-color;
      color: $primary-color;
    }
  }

  // 朴素按钮样式
  &.is-plain {
    background-color: #fff;

    &.v-btn--primary {
      color: $primary-color;
      border-color: $primary-color;

      &:hover:not(.is-disabled) {
        background-color: #ecf5ff;
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
